let inputEle = document.querySelector('input')
let circleEle = document.querySelector('.circle')

function addcontainer() {
  document.addEventListener('mousedown', (e) => {
    console.log('e.target: ', e.target)
    if (!(circleEle.contains(e.target))) {
      circleEle.innerHTML = ''
      circleEle.style.display = 'none'
    }
  })
}
addcontainer()

inputEle.onkeyup = (e) => {
  let value = inputEle.value
  console.log(value)
  $.ajax({
    type: 'get',
    url: 'http://localhost:3000/thinkk',
    data: { keyword: value },
    success: function (result) {
      if (result.length > 0) {
        console.log(result)
        let htmlArray = result.map((item) => {
          return `<div>${item}</div>`
        })
        circleEle.innerHTML = htmlArray.join('')
        circleEle.style.display = 'block'
      } else {
        circleEle.innerHTML = ''
        circleEle.style.display = 'none'
      }
    }
  })
}